// import Vue from 'vue'
// import VueDraggableResizable from 'vue-draggable-resizable'
// Vue.component('vue-draggable-resizable', VueDraggableResizable)
// export const dragResizableFunc = (columns) => {
//   return {
//     header: {
//       cell: (h, props, children) => {
//         const { key, ...restProps } = props
//         const col = columns.find(col => {
//           const k = col.dataIndex || col.key
//           return k === key
//         })
 
//         if (!col || !col.width) {
//           return h('th', { ...restProps }, [...children])
//         }
 
//         const dragProps = {
//           key: col.dataIndex || col.key,
//           class: 'table-draggable-handle',
//           attrs: {
//             w: 10,
//             x: col.width,
//             z: 1,
//             axis: 'x',
//             draggable: true,
//             transform: 'none',
//             resizable: false
//           },
//           on: {
//             dragging: (x) => {
//               col.width = Math.max(x, 50)
//             }
//           }
//         }
//         // console.log(dragProps,'dragProps')
//         const drag = h('vue-draggable-resizable', { ...dragProps })
//         // console.log(drag,'drag')
//         return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
//       }
//     }
//   }
// }
// export default dragResizableFunc;
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
export const dragResizableFunc = (columns) => {
  // const draggingMap = {};
  // columns.forEach((col) => {
  //   draggingMap[col.key] = col.width;
  // });
  // const draggingState = Vue.observable(draggingMap);
  return {
    header: {
      cell: (h, props, children) => {
        // let thDom = null;
        const { key, ...restProps } = props
        let col;
        if (key === 'selection-column') {
          col = {};
        } else {
          col = columns.find((item) => {
            const k = item.dataIndex || item.key;
            return k === key;
          });
        }
        // const col = columns.find(col => {
        //   const k = col.dataIndex || col.key
        //   return k === key
        // })
        if (!col || !col.width || col.dataIndex == 'action' || col.key == 'rowIndex') {
          return <th {...restProps}>{children}</th>
        }
        const onDrag = (x) => {
          // draggingState[key] = 0;
          col.width = Math.max(x, 50) // 此处50为伸缩时的最小宽度
        };

        // const onDragstop = () => {
        //   draggingState[key] = thDom.getBoundingClientRect().width;
        // };

        return (
          <th
            {...restProps}
            // v-ant-ref={(r) => (thDom = r)}
            width={col.width}
            class="resize-table-th"
          >
            {children}
            <vue-draggable-resizable
              key={col.key}
              class="table-draggable-handle"
              w={10}
              x={col.width}
              z={1}
              axis="x"
              draggable={true}
              resizable={false}
              onDragging={onDrag}
              // onDragstop={onDragstop}
            ></vue-draggable-resizable>
          </th>
        );
      }
    }
  }
}
export default dragResizableFunc;